<template>
    <div>
        <el-input style="width: 150px;float: left"
                  v-model="search"
                  class="search_name"
                  @keyup.native="onSearch()"
                  placeholder="输入保证金查询">
        </el-input>
        <el-input style="width: 150px;float: left"
                  v-model="search1"
                  class="search_name"
                  @keyup.native="onSearch()"
                  placeholder="输入业主查询">
        </el-input>
        <div style="color: rebeccapurple" align="left">

            <el-button    type="primary" plain @click="dialogVisible = true" icon="el-icon-circle-plus-outline" @close="cancel">添加</el-button>
            <el-button    type="primary" plain  @click="deleteFileOrDirectory(sels)" icon="el-icon-remove">删除</el-button>
        </div>
        <div>
            <el-table :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)" border stripe @selection-change="selsChange">

                <el-table-column label="序号" prop="fid"/>
                <el-table-column
                        type="selection"
                        width="40" >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="品牌" prop="brand"/>
                <el-table-column label="装修保证金额" prop="fitmentmoney"/>
                <el-table-column label="是否缴纳" prop="payment"/>
                <el-table-column label="到账日期" prop="dztime"/>
                <el-table-column label="是否退反" prop="recall"/>
                <el-table-column label="退反日期" prop="recalltime"/>
                <el-table-column label="业主" prop="owner.oname"/>
                <el-table-column label="备注" prop="remark"/>
            </el-table>
            <!--添加页面-->
            <el-dialog
                    title="添加页面"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <!--        <el-form-item label="客户订单编号" prop="id">-->
                    <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
                    <!--        </el-form-item>-->
                    <!--      </el-form-item>-->
                    <el-form-item label="品牌" prop="brand">
                        <el-input v-model="ruleForm.brand" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="装修保证金额" prop="fitmentmoney">
                        <el-input v-model="ruleForm.fitmentmoney" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="是否缴纳" prop="payment">
                        <el-input v-model="ruleForm.payment" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="到账日期" prop="dztime">
                        <el-input v-model="ruleForm.dztime" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="是否退反" prop="recall">
                        <el-input v-model="ruleForm.recall" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="退反日期" prop="recalltime">
                        <el-input v-model="ruleForm.recalltime" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="业主" prop="oid">
                        <el-select  v-model="ruleForm.oid" style="width: 300px">
                            <el-option v-for="item in selectList" :key="item.oid" :label="item.oname" :value="item.oid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="ruleForm.remark" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
          </span>
  </span>
            </el-dialog>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
                <el-dialog
                        title="编辑"
                        :append-to-body='true'
                        :visible.sync="dialogUpdate"
                        width="30%"
                        :before-close="cancel">
                    <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <!--        <el-form-item label="客户订单编号" prop="id">-->
                        <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
                        <!--        </el-form-item>-->

                        <!--      </el-form-item>-->
                        <el-form-item label="序号" prop="fid" style="display:none">
                            <el-input v-model="ruleForm.fid" type="hidden" style="width: 300px" ></el-input>
                        </el-form-item>
                        <el-form-item label="品牌" prop="brand">
                            <el-input v-model="ruleForm.brand" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="装修保证金额" prop="fitmentmoney">
                            <el-input v-model="ruleForm.fitmentmoney" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="是否缴纳" prop="payment">
                            <el-input v-model="ruleForm.payment" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="到账日期" prop="dztime">
                            <el-input v-model="ruleForm.dztime" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="是否退反" prop="recall">
                            <el-input v-model="ruleForm.recall" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="退反日期" prop="recalltime">
                            <el-input v-model="ruleForm.recalltime" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="业主" prop="oid">
                            <el-select  v-model="ruleForm.oid" style="width: 300px">
                                <el-option v-for="item in selectList" :key="item.oid" :label="item.oname" :value="item.oid"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="ruleForm.remark" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
     <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
          </span>
          </span>
                </el-dialog>
            </el-form>
        </div>
        <div class="block" style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Zhuangxiu",
        data() {
            return {
                selectList: {oname:'', oid:''},
                sels: [],
                pageSize: 3,
                currentPage: 1,
                total: 0,
                search: '',
                search1: '',
                activeName: 'a',
                radio: '1',
                dialogVisible: false,
                dialogUpdate: false,
                disablePage: false,
                ruleForm: {
                    fid:'',
                    brand:'',
                    fitmentmoney:'',
                    payment:'',
                    expire:'',
                    time:'',
                    state:'',
                    money:'',
                    oid:'',
                    oname:'',
                    tid:'',
                    tname:'',
                    mid:'',
                    mname:'',
                },
                users: {
                },
            };
        },
        created() {
            const that = this;
            this.getPages();
            this.axios.get('http://localhost:8082/selectFitmentList')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;

                }),this.axios.get('http://localhost:8082/selectOwnerList')
                .then(function (response) {
                    console.log(response);
                    that.selectList = response.data;
                })
        },


        methods:{
            updateUser() {
                let postData = this.qs.stringify({
                    fid:this.ruleForm.fid,
                    brand: this.ruleForm.brand,
                    fitmentmoney: this.ruleForm.fitmentmoney,
                    payment: this.ruleForm.payment,
                    dztime: this.ruleForm.dztime,
                    recall: this.ruleForm.recall,
                    recalltime: this.ruleForm.recalltime,
                    remark: this.ruleForm.remark,
                    oid: this.ruleForm.oid,

                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8082/updateFitment',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8082/selectFitmentList').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.onSearch();
                        this.cancel()
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                        this.onSearch();
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                    this.onSearch();
                });
            },
            handleEdit(index, row) {
                this.dialogUpdate = true;
                this.ruleForm = Object.assign({}, row); //这句是关键！！！
            },
            selsChange(sels) {
                this.sels = sels
            },
            deleteFileOrDirectory() {
                var ids = this.sels.map(item => item.fid).join()//获取所有选中行的id组成的字符串，以逗号分隔
                console.log(ids);
                this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'

                }).then(() => {
                        this.axios.post('http://localhost:8082/deleteFitmentAll?ids=' + ids);
                        this.onSearch()
                        console.log("删除成功")
                    }
                ).then(response =>
                {
                    this.getPages();
                    this.currentPage = 1;
                    this.axios.post('http://localhost:8082/selectFitmentList').then(response =>
                    {
                        this.tableData = response.data;
                    }).catch(error =>
                    {
                        console.log(error);
                        this.onSearch();
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    console.log(response);
                    this.onSearch();
                }).catch(error =>
                {
                    console.log(error);
                    this.onSearch();
                });


            },
            onSearch() {
                let postData = this.qs.stringify({
                    fitmentmoney: this.search,
                    oname: this.search1,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8082/selectFitmentList',
                    data: postData
                }).then(response =>
                {
                    this.getPages();
                    this.users = response.data;
                    this.disablePage = true;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            handleSizeChange(val) {
                this.getPageData();
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getPageData();
                console.log(this.pageSize);
            },
            handleCurrentChange(val) {
                this.getPageData();
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getPageData();
                console.log(this.currentPage);
            },
            getPageData() {
                console.log("是否yes");
                let start = (this.currentPage - 1) * this.pageSize;
                let end = start + this.pageSize;
                this.schArr = this.users.slice(start, end);
                this.total = this.users.length;
            },
            getPages() {
                let postData = this.qs.stringify({
                    fitmentmoney: this.search,
                    oname: this.search1,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8082/getFitmentCount',
                    data: postData
                }).then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            emptyUserData(){
                this.ruleForm = {
                    brand: this.ruleForm.brand,
                    fitmentmoney: this.ruleForm.fitmentmoney,
                    payment: this.ruleForm.payment,
                    dztime: this.ruleForm.dztime,
                    recall: this.ruleForm.recall,
                    recalltime: this.ruleForm.recalltime,
                    remark: this.ruleForm.remark,
                    oid: this.ruleForm.oid,
                }
            },
            cancel() {
                this.dialogVisible = false;
                this.ruleForm.fid='',
                    this.ruleForm.brand='',
                    this.ruleForm.dztime='',
                    this.ruleForm.remark='',
                    this.ruleForm.fitmentmoney='',
                    this.ruleForm.oid='',
                    this.ruleForm.oname='',
                    this.ruleForm.payment='',
                    this.ruleForm.recall=''
                this.dialogUpdate=false
            },
            addUser() {
                let postData = this.qs.stringify({
                    brand: this.ruleForm.brand,
                    fitmentmoney: this.ruleForm.fitmentmoney,
                    payment: this.ruleForm.payment,
                    dztime: this.ruleForm.dztime,
                    recall: this.ruleForm.recall,
                    recalltime: this.ruleForm.recalltime,
                    remark: this.ruleForm.remark,
                    oid: this.ruleForm.oid,

                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8082/addFitment',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8082/selectFitmentList').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.onSearch()
                        this.cancel()
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                        location.reload()
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                    location.reload()
                });
            },
        }
    }
</script>

<style scoped>

</style>
